<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<div id="app">

			<mycounter></mycounter>




		</div>

		<script>
			let mycounter = {
				template: "<input type=\"button\" :value=\"'当前点击次数:'+counter\"  @click=\"addCounter()\"  /> ",
				//组件的data 要求是一个函数， 函数需要返回 json数据
				data() {
					return {
						counter: 0
					}
				},
				methods: {
					addCounter() {
						this.counter++
					}
				}
			}

			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				components: {
					'mycounter': mycounter
				},
				data: {
					// counter:0
				},
				methods: {

				}

			});
		</script>

	</body>
</html>
